import { Table, Image, Button, Space, Popconfirm } from 'antd'
import { useState, useEffect } from 'react'
import { getBannerList, deleteBanner } from './../../api/banner'

const Com = (props) => {
  const columns = [
    {
      title: '序号',
      align: 'center',
      width: '10%',
      fixed: 'left',
      render (text, record, index) {
        return <span>{ (current - 1) * pageSize + index + 1 }</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      width: '30%',
      align: 'center',
      render (text, record, index) {
        return (< Image src = { text } width={200} height={100}/>)
      }
    },
    {
      title: '链接',
      dataIndex: 'link',
      width: '20%',
      align: 'center',
    },
    {
      title: '提示',
      dataIndex: 'alt',
      width: '20%',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      render (text, record, index) {
        return (
          <Popconfirm
            title="确认删除?"
            onConfirm={ () => {
              deleteBanner({ bannerid: record.bannerid }).then(res => {
                setBannerList(res.data)
              })
              console.log('删除成功')
              getBannerList().then(res => {
                setBannerList(res.data)
              })
            }}
            onCancel={() => {}}
            okText="确定"
            cancelText="取消"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        )
      }
    }
  ]
  
  
  const [ bannerList, setBannerList ] = useState([])


  useEffect(() => {
    getBannerList().then(res => {
      // console.log(res)
      setBannerList(res.data)
    })
  }, [])

  // 分页器
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  return (
    <Space direction="vertical" style={{ width: '100%', height: '100%', overflow:'auto'}}>
      <Button 
        type="primary" 
        style={{ marginBottom: '10px'}}
        onClick = { () => {
          props.history.push('/banner/add')
        }}
      >添加轮播图</Button>
      <Table 
        dataSource={bannerList} 
        columns={columns} 
        rowKey = "bannerid" 
        pagination = { {
          position: ['bottomRight'],
          current,
          pageSize,
          pageSizeOptions:['5', '10', '15', '20'],
          onChange: (page, pageSize) => {
            setCurrent(page)
            setPageSize(pageSize)
          },
          showQuickJumper: true,
          showTotal: (total) => <span>共有{total}条数据</span>

        } }
      />
    </Space>
  )
}

export default Com

// export default connect(state => ({
//   adminname: state.getIn(['user', 'adminname'])
// }))(Com)
